<template>
  <view class="goods-footNav">
    <view class="foot-nav-content" :style="[outModuleCss]">
      <view :style="[moduleBgCss]" class="module-bg"></view>
      <view
        class="foot-notice"
        v-if="goodsDisabled.no_num || goodsDisabled.out_line"
      >
        {{ goodsDisabled.text }}
      </view>
      <view class="footNav-body">
        <view class="foot-btn-group">
          <view
            class="nav-item"
            v-for="(item, index) in tabList"
            :key="index"
            @click="handleNavItem(item)"
          >
            <button open-type="contact" v-if="item.link.link == 'service'"></button>
            <view class="nav-icon">
              <!-- <image :src="item.icon" alt="" /> -->
              <text :class="['iconfont',item.icon]"></text>
            </view>
            <view class="nav-text" :style="{ color: item.fontColor }">
              {{ item.text }}
            </view>
          </view>
        </view>
        <view class="buyBtn" @click="exchange">立即兑换</view>
      </view>
    </view>
  </view>
</template>

<script>
import { diySysPageMixin } from "@/components/diySystemPage/mixins/index.js";

export default {
  name: "",
  props: {
    propsData: {
      type: Object,
      default: {},
    },
    goodsInfo: {
      type: Object,
      default: {},
    },
  },
  mixins: [diySysPageMixin],
  components: {},
  data() {
    return {};
  },
  mounted() {
  },
  watch: {},
  computed: {
    phone() {
      if(this.goodsInfo && this.goodsInfo.store_info && this.goodsInfo.store_info.contact_tel) {
        return this.goodsInfo.store_info.contact_tel
      }else {
        return ''
      }
    },
    tabList() {
      // return this.propsData.params.tabList;
      return [{
        icon:'icon-store',
        text:'首页',
        link:{
          link:'/pages/home/home',
          open_type:"switchtab"
        }
      },
      {
        icon:'icon-service',
        text:'客服',
        link:{
          link:'service',
          open_type:"service"
        }
      },
      {
        icon:'icon-jiaobiao',
        text:'兑换记录',
        link:{
          link:'/integral/integralStore/record',
          open_type:"navigate"
        }
      }]
    },
    styleType() {
      return this.propsData.params.styleType;
    },
    buyBtn() {
      return this.propsData.params.buyBtn;
    },
    cartBtn() {
      return this.propsData.params.cartBtn;
    },
    cartNum() {
      let num = this.$store.getters.shopCartNum;
      if (num > 100) {
        num = "99+";
      }
      return num;
    },
    productType() {
      return this.goodsInfo.product_type;
    },
    goodsDisabled() {
      let obj = {
        no_num: false,
        out_line: false,
        text: this.$t("diy.shelves"),
      };
      if (
        this.goodsInfo.product_type == 0 ||
        this.goodsInfo.product_type == 4
      ) {
        if (this.goodsInfo.use_attr == 0) {
          if (this.goodsInfo.goods_num <= 0 || this.goodsInfo.num <= 0) {
            obj.no_num = true;
            obj.text = this.$t("diy.saleOut");
          }
          if (this.goodsInfo.status <= 0) {
            obj.out_line = true;
            obj.text = this.$t("diy.shelves");
          }
        } else {
          let flag = this.goodsInfo.attr.some((d) => {
            return d.num > 0;
          });
          obj.no_num = !flag;
          obj.text = this.$t("diy.saleOut");
        }
      }
      if (this.goodsInfo.product_type == 1) {
        let flag = this.goodsInfo.date_book.date_book.some((d) => {
          return d.num > 0;
        });
        obj.no_num = !flag;
        if (!flag) {
          obj.text = this.$t("diy.saleOut");
        } else {
          obj.text = "";
        }
      }
      if (this.goodsInfo.product_type == 2) {
        obj.no_num = true;
        obj.text = this.$t("diy.saleOut");
        let service_book = this.goodsInfo.service_book.data;
        for (let i = 0; i < service_book.length; i++) {
          for (let k = 0; k < service_book[i].time.length; k++) {
            for (let p = 0; p < service_book[i].time[k].times.length; p++) {
              if (service_book[i].time[k].times[p].num > 0) {
                obj.no_num = false;
                obj.text = "";
                break;
              }
            }
          }
        }
      }
      return obj;
    },
  },
  methods: {
    // 点击nav
    handleNavItem(item) {
      let link = item.link;
      if (link?.link) {
        if(link.link == 'service') {
          return
        } 
        this.$utils.diySkip(link);
      }
    },
    showCartNum(item) {
      if (item.text.indexOf("购物车") > -1) return true;
      return false;
    },
    // 点击立即兑换
    exchange() {
      this.$emit('buyNow')
    }
  },
};
</script>

<style lang="scss" scoped>
.goods-footNav {
  width: 100%;
  position: fixed;
  left: 0;
  bottom: 0px;
  z-index: 111;

  .foot-nav-content {
    width: 100%;
    height: 100%;
    border-bottom-right-radius: 0 !important;
    border-bottom-left-radius: 0 !important;
    position: relative;
    overflow: hidden;
    border-top: 1px solid #f0f1f3;
    padding-bottom: env(safe-area-inset-bottom);
  }
  .footNav-body {
    width: 100%;
    height: 100rpx;
    display: flex;
    align-items: center;
    justify-content: space-between;
    .foot-btn-group {
      flex: auto;
      display: flex;
      align-items: center;
      .nav-item {
        display: flex;
        flex-direction: column;
        align-items: center;
        margin: 0 3.2vw;
        position: relative;
        height: 10.13vw;
        justify-content: flex-end;
        button {
          position: absolute;
          width: 100%;
          height: 100%;
          opacity: 0;
          left:0;
          top: 0;
          z-index: 100;
        }
        .nav-icon {
          width: 4.267vw;
          height: 4.267vw;
          position: relative;
          text-align: center;
          display: flex;
          align-items: center;
          justify-content: center;
          image {
            width: 100%;
            height: 100%;
            display: block;
          }
          .iconfont {
            font-size: 42rpx;
          }
          .cart-num {
            width: 24rpx;
            height: 24rpx;
            border: 1px solid #f1302f;
            border-radius: 50%;
            position: absolute;
            right: -12rpx;
            top: -12rpx;
            z-index: 11;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 18rpx;
            font-weight: 600;
            color: #f1302f;
            background-color: #ffffff;
          }
        }
        .nav-text {
          white-space: nowrap;
          font-size: 24rpx;
          font-family: PingFang SC;
          font-weight: 400;
          color: #262626;
          margin-top: 3rpx;
          transform: scale(0.75);
        }
      }
    }
    .buyBtn {
      width: 412rpx;
      min-width: 412rpx;
      height: 76rpx;
      background-color: #f0250e;
      border-radius: 120rpx;
      font-size: 26rpx;
      font-weight: 600;
      color: #fff;
      display: flex;
      align-items: center;
      justify-content: center;
    }
    .action-group {
      flex: 1;
      display: flex;
      align-items: center;
      .group-box {
        display: flex;
        align-items: center;
        margin-right: 2.93vw;
        .cart-btn {
          width: 26.67vw;
          height: 10.13vw;
          background-color: #f22407;
          border-radius: 5.065vw;
          display: flex;
          justify-content: center;
          align-items: center;
          font-size: 26rpx;
          font-family: PingFang SC;
          font-weight: 600;
          color: #ffffff;
        }
        .buy-btn {
          width: 26.67vw;
          height: 10.13vw;
          background-color: #faa60f 0%;
          border-radius: 5.065vw;
          display: flex;
          justify-content: center;
          align-items: center;
          font-size: 26rpx;
          font-family: PingFang SC;
          font-weight: 600;
          color: #ffffff;
          margin-left: 1.6vw;
          position: relative;
          .contact {
            width: 100%;
            height: 100%;
            position: absolute;
            left: 0;
            top: 0;
            z-index: 1;
            opacity: 0;
          }
        }
        .group-btns {
          width: 54.93vw;
          height: 10.13vw;
          border-radius: 5.065vw;
          overflow: hidden;
          display: flex;
          align-items: center;
          .btn-cart,
          .btn-buy {
            width: 50%;
            height: 100%;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 26rpx;
            font-family: PingFang SC;
            font-weight: 600;
            color: #ffffff;
          }
          .btn-cart {
            border-radius: 5.065vw 0 0 5.065vw;
            background-color: #f22407;
          }
          .btn-buy {
            border-radius: 0 5.065vw 5.065vw 0;
            background-color: #faa60f;
          }
        }
      }
      .style-two {
        .cart-btn,
        .buy-btn {
          border-radius: 0px;
        }
      }
    }
    .one-node {
      padding-right: 2.93vw;

      .buy-btn {
        width: 54.93vw;
        height: 10.13vw;
        background-color: #faa60f 0%;
        border-radius: 5.065vw;
        display: flex;
        justify-content: center;
        align-items: center;
        font-size: 26rpx;
        font-family: PingFang SC;
        font-weight: 600;
        color: #ffffff;
        position: relative;
        .contact {
          width: 100%;
          height: 100%;
          position: absolute;
          left: 0;
          top: 0;
          z-index: 1;
          opacity: 0;
        }
      }
    }

    .action-disabled {
      .cart-btn,
      .buy-btn {
        position: relative;
        text {
          opacity: 0.2;
        }
      }
      .cart-btn::before {
        content: "";
        width: 100%;
        height: 100%;
        left: 0;
        top: 0;
        position: absolute;
        z-index: 11;
        background-color: #ffffff;
        opacity: 0.3;
      }
      .buy-btn::before {
        content: "";
        width: 100%;
        height: 100%;
        left: 0;
        top: 0;
        position: absolute;
        z-index: 11;
        background-color: #ffffff;
        opacity: 0.3;
      }
    }

    .flex-end {
      justify-content: flex-end;
    }
  }

  .foot-notice {
    width: 100%;
    height: 8.8vw;
    background: #fcf9da;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 24rpx;
    font-family: PingFang SC;
    font-weight: 400;
    color: #df7328;
  }
  .module-bg {
    width: 100%;
    height: 100%;
    z-index: -1;
    position: absolute;
    left: 0;
    top: 0;
  }
}
</style>
